<template>
  <div>
    <Form>
      <FormItem prop="testSet">
        <Input type="text" v-model="testSet" disabled placeholder="请选择测试集">
        <Button slot="append" icon="ios-search" @click="value=true"></Button>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" long @clcik="value=true">提交</Button>
      </FormItem>
    </Form>
    <p>
      <Row>
        <Col span="6">准确率：</Col>
        <Col span="4">{{precision}}%</Col>
      </Row>
    </p>
    <p>
      <Row>
        <Col span="6">召回率：</Col>
        <Col span="4">{{recall}}%</Col>
      </Row>
    </p>
    <p>
      <Row>
        <Col span="6">mAp：</Col>
        <Col span="4">{{mAp}}%</Col>
      </Row>
    </p>
    <Drawer title="数据集查询" :closable="false" v-model="value" width="600">
      <Row>
        <Col span="8">
          <Input type="text" v-model="fuzzyKey" placeholder="请输入数据集名或描述">
          </Input>
        </Col>
        <Col span="8" offset="2">
          <Input type="text" v-model="creator" placeholder="请输入数据集上传者">
          </Input>
        </Col>
        <Col span="2" offset="2">
          <Button type="primary" @click="searchDataSet">查询</Button>
        </Col>
      </Row>
      <Table border ref="selection" :columns="columns" :data="data"></Table>
    </Drawer>
  </div>
</template>

<script>
    export default {
        name: "model-check",
      data(){
        return{
          precision:100,
          recall:0,
          mAp:0,
          testSet:'',
          value:false,
          fuzzyKey:'',
          creator:'',
          columns: [
            {
              title: '数据集名',
              key: 'dataSetName',
              width:160
            },
            {
              title: '描述',
              key: 'dataSetDes'
            },
            {
              title:'上传者',
              key:'creator'
            },
            {
              title: '操作',
              key: 'handle',
              width:80,
              //通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
              //render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
              render: (h, params) => {
                return h('div', [
                  //选择数据集
                  h('Button', {
                    props: {
                      type:'primary'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.chooseDataSet(params.index)
                      }
                    }
                  },'确定')
                ]);
              }
            }
          ],
          data: [
            {
              dataSetName:'啤酒数据集一',
              dataSetDes:'XXXXX',
              creator:'XXX'
            }
          ]
        }
      },
      methods:{
          //选择数据集
          chooseDataSet(index){
            this.testSet=this.data[index].dataSetName;
            this.value=false;
          },
          //查询数据集
        searchDataSet(){

        }
      }
    }
</script>

<style scoped>

</style>
